<template>
    <div id="app">
        <div class="header">
        <div class="top">
            <div class="wrapper">
                <ul class="top_list">
                    <li><a href="#" @click = "handle">xiaotuxian001</a></li>
                    <li><a href="#">退出登录</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">手机版</a></li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="wrapper">
                <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" class="logo" alt="">
                <ul class="nav">
                    <li><a href="#" @click="toHome">首页</a></li>
                    <li v-for="item in navList" :key="item.id"><a href="#" @click = "tmwl(item)">{{item.name}}</a>
                        <ol>
                            <li v-for="itemx in item.children" :key="itemx.id"><a href="#">
                                <img :src="itemx.picture" alt="">
                                <span>{{itemx.name}}</span></a>
                            </li>
                        </ol>
                    </li>
                    <li>
                        <div class="sgw">
                            <el-input placeholder="请输入内容" v-model="input1" class="search">
                                <template slot="prepend"><el-button slot="append" icon="el-icon-search"></el-button></template>
                            </el-input>
                            <i class="el-icon-shopping-cart-2"></i>
                        </div>
                    </li>
                </ul>
                
            </div>
        </div>
    </div>
        <!-- <home-header></home-header> -->
        <div class="wrapper">
            <el-carousel trigger="click" height="500px">
                <el-carousel-item v-for="item in barList" :key="item.id" interval="4000">
                    <img :src="item.imgUrl" alt="" class="lb">
                </el-carousel-item>
            </el-carousel>
            <div class="classify">
                <p class="qwe">全部分类</p>
                <div class="allfl">
                    <div v-for="(item, index) in banner1" :key="index">
                        <img :src="item.picture" alt="" class="img1">
                        <span class="na1">{{ item.name }}</span>
                    </div>
                </div>
            </div>
            <div class="classify1">
                <!-- <p class="qwe">全部分类</p> -->
                <p class="qwe">温暖柔软，品质之选</p>
                <div class="con">
                    <div v-for="(item, index) in banner2" :key="index" class="box">
                        <img :src="item.picture" alt="" class="img2">
                        <span class="naq2">{{ item.name }}</span>
                        <span class="naw2">{{ item.desc }}</span>
                        <span class="nae2">￥{{ item.price}}</span>
                    </div>
                </div>
            </div>

        <div class="classify1">
            <p class="qwe">温暖柔软，品质之选</p>
            <div class="con">
                <div v-for="(item, index) in banner2" :key="index" class="box">
                    <img :src="item.picture" alt="" class="img2">
                    <span class="naq2">{{ item.name }}</span>
                    <span class="naw2">{{ item.desc }}</span>
                    <span class="nae2">￥{{ item.price}}</span>
                </div>
            </div>
        </div>
        <div class="classify1">
            <p class="qwe">温暖柔软，品质之选</p>
            <div class="con">
                <div v-for="(item, index) in banner2" :key="index" class="box">
                    <img :src="item.picture" alt="" class="img2">
                    <span class="naq2">{{ item.name }}</span>
                    <span class="naw2">{{ item.desc }}</span>
                    <span class="nae2">￥{{ item.price}}</span>
                </div>
            </div>
        </div>
        <div class="classify1">
            <p class="qwe">温暖柔软，品质之选</p>
            <div class="con">
                <div v-for="(item, index) in banner2" :key="index" class="box">
                    <img :src="item.picture" alt="" class="img2">
                    <span class="naq2">{{ item.name }}</span>
                    <span class="naw2">{{ item.desc }}</span>
                    <span class="nae2">￥{{ item.price}}</span>
                </div>
            </div>
        </div>
        </div>
        <home-footer></home-footer>
    </div>
</template>
<script>
// import HomeHeader from '@/common/HomeHeader.vue'
import HomeFooter from '@/common/HomeFooter.vue'
export default {
  components: {HomeFooter },
    name: "TmWl",
    data() {
        return {
            tableData: "",
            banner1: [],
            banner2: [],
            navList:[],
            input1:"",
            lis:'',
            barList:[]
        }
    },
    methods:{
        tmwl(e) {
            this.$router.push({
                path:"/TmWl",
                query:{
                    list:e
                }
            })
        },
        handle(){
            this.$router.push("/Fskl")
        },
        demo(a){
            console.log(a)
            this.lis = a
        },
        toHome(){
            this.$router.push("/home");
        }
    },   
    async created() {
        this.tableData = this.$route.query.list
        console.log(this.$route.query.list)
        this.banner1 = this.$route.query.list.children
        this.banner2 = this.$route.query.list.goods.slice(0,5)
        // console.log(this.banner);
        const res=await this.$http.homeApi();
        this.navList=res.data.result.categoryBanners;
        this.barList=res.data.result.imageBanners;
    },
}
</script>



<style lang="less" scoped>
html,
body{
    background:#f5f5f5;
}
#app {
    // height: 100%;
    // margin: 0;
    // padding: 0;
    background-color: #f5f5f5;
    .wrapper{
        padding:0 250px;
        .lb{
            width:100%;
            margin-top:20px;
        }
    }
}

.classify {
    width: 100%;
    padding-bottom:30px;
    background-color: #fff;
    text-align:center;
    p{
        font-size:28px;
        color:#666;
        padding-top:20px;
    }
    .allfl{
        display:flex;
        justify-content: flex-start;
        div{
            width:14%;
            text-align:center;
            margin-top:-20px;
            img{
                width:100%;
            }
            span{
                font-size:20px;
            }
        }
    }
    
}

.classify1 {
    width:100%;
    margin-top: 40px;
    text-align:center;
    background:#fff;
    padding-top:10px;
    .con{
        display: flex;
        justify-content: space-between;
        div{
            width:15%;
            img{
                width:100%;
            }
        }
    }
    p{
        font-size:26px;
        margin-bottom:20px;
    }
}


.clearFloat:after{
	display:block;
	content:"";
	clear:both;
}
.header{
    width:100%;
    height:170px;
    position: relative;
    .wrapper{
        padding:0 250px;
    }
    .top{
        height:50px;
        background:#333;
        color:#fff;
        .top_list{
            list-style:none;
            display:flex;
            float:right;
            li{
                list-style:none;
                a{
                    text-decoration: none;
                    color:#cdcdcd;
                    padding:0 10px;
                    border-right:1px solid #666;
                    font-size:14px;
                }
                &:last-child a{
                    border-right:0;
                }
            }
            li:hover a{
                color:#27bb9a;
            }
        }
    }
    .bottom{
        width:100%;
        height:120px;
        line-height:120px;
        background:#fff;
        position:sticky;
        left:0;
        z-index:10;
        display:flex;
        justify-content: flex-start;
        .wrapper{
            padding:0 250px;
        }
        .logo{
            width:250px;
            height:100px;
            float:left;
            // margin-top:20px;
        }
        .nav{
            // width:calc(100% - 250px);
            display:flex;
            justify-content: space-between;
            li{
                list-style:none;
                width:82px;
                z-index:20;
                a{
                    text-decoration:none;
                    color:#333;
                    font-size:18px;
                    margin:0 10px;
                }
                ol{
                    list-style:none;
                    width:1180px;
                    height:120px;
                    background:#fff;
                    border:1px solid #ccc;
                    border-bottom:0;
                    position:absolute;
                    left:250px;
                    top:120px;
                    z-index:200;
                    display:none;
                    li{
                        float:left;
                        text-align:center;
                        a{
                            color:#000;
                            font-size:13px;
                            img{
                                width:80px;
                                height:80px;
                                margin-top:10px;
                            }
                            span{
                                display:block;
                                margin-top:-100px;
                            }
                        }
                    }
                    li:hover a{
                        border-bottom:0;
                    }
                }
            }
            li:hover > a{
                color:#27bb9a;
                border-bottom:1px solid #27bb9a;
            }
            li:hover ol{
                display:block;
            }
		}
        .sgw{
            width:250px;
            .search{
                width:200px; 
                border:0;
                border-bottom:1px solid #eee;
                .el-button{
                    background: #fff;
                    width:30px;
                }
            }
            i{
                font-size:30px;
                margin-left:10px;
            }
        }
        
    }
}
</style>